<script setup lang="ts">
import OfficialNode from './official-node.vue';
import OfficialTop from './official-top.vue';
import OfficialProduct from './official-product.vue';
import RecommendArticles from './recommend-articles.vue';
import { ONLINE_USE_LINK } from '@/utils/constants';

const redirect = () => {
  window.open('https://www.zhihu.com/zvideo/1549056407118467072', '_blank');
};
</script>

<template>
  <div class="home">
    <!-- 顶部 -->
    <official-top/>
    <!-- 建木介绍 -->
    <div class="official-description-container border-bottom-common">
      <div class="jianmu-description-img"/>
    </div>
    <div class="btn-wrapper">
      <a :href="ONLINE_USE_LINK">
        <div class="online-btn">在线体验</div>
      </a>
      <div class="video-display" @click="redirect"><i class="icon"></i>一分钟了解建木</div>
    </div>
    <!--推荐文章-->
    <recommend-articles/>
    <!-- 节点相关 -->
    <official-node/>
    <!-- 产品相关 -->
    <officialProduct/>
  </div>
</template>

<style scoped lang="less">
.home {
  .btn-wrapper {
    display: flex;
    align-items: center;
    margin: 0 30px;

    .online-btn {
      font-weight: 400;
      color: #042749;
      font-size: 30px;
      text-align: center;
      width: 298px;
      height: 80px;
      line-height: 80px;
      background: #FFFFFF;
      border-radius: 10px;
      border: 1px solid #A5B5C3;
      margin: 0 auto;
    }

    .video-display {
      margin-left: 30px;
      color: #096DD9;
      font-weight: 400;
      font-size: 30px;
      display: flex;
      align-items: center;

      .icon {
        width: 44px;
        height: 44px;
        background: url('@/assets/wap/svgs/video.svg') no-repeat;
        background-size: 100%;
        margin-right: 16px;
      }
    }
  }

  // 建木描述
  .official-description-container {
    width: 100%;
    height: 322px;
    padding: 60px 30px 55px 30px;
    background-image: url('@/assets/wap/pngs/jianmu-tree.png');
    background-size: 100%;
    position: relative;
    z-index: 100;

    .jianmu-description-img {
      width: 690px;
      height: 207px;
      background: url('@/assets/wap/pngs/jianmu-description.png');
      background-size: 100%;
    }
  }
}
</style>
